<template>
    <div>
        <el-row class="tac">
            <el-col :span="24">
                <h5>小U商城后台</h5>
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                router>
                <el-menu-item >
                    <i class="el-icon-menu"></i>
                    <span slot="title" @click="jump">首页</span>
                    
                </el-menu-item>

                <el-submenu v-for="(item,index) in list" :index="item.title[1]" :key="index+'item'">
                    <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{item.title[0]}}</span>
                    </template>
                    <el-menu-item  v-for="(child,index) in item.children" :index="'/index/'+child[1]" :key="index+'child'">{{child[0]}}</el-menu-item>
                </el-submenu>
                </el-menu>
            </el-col>
            </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return {
            list:[
                {
                    title:["系统设置",'index'],
                    children:[
                        ['菜单管理','list'],
                        ['角色管理','role'],
                        ['管理员1管理','admin'],
                    ]
                },
                {
                    title:["商城管理",'shop'],
                    children:[
                        ['商品分类','classify'],
                        ['商品规格','standard'],
                        ['商品管理','manage'],
                        ['会员管理','member'],
                        ['轮播图管理','banner'],
                        ['商品秒杀','seckill'],
                    ]
                }
            ]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        jump(){
            this.$router.push('/')
        }
    }
}
</script>

<style scoped>
    h5{
        font-size: 18px;
        line-height: 60px;
    }
    #index{
        padding:  0 14px;
    }
</style>